<template>
  <div class="menu_wrap flex" :style="{ color: '#fff' }">
    <div
      v-for="(item, index) in menuList"
      :key="index"
      class="menu_item_wrapper flex"
      @mouseleave="close()"
    >
      <i
        v-if="index !== 0"
        class="separate-i"
        :style="{ background: '#fff' }"
      />
      <div class="menu_item flex-y-center" :class="{ 'ml-[10px]': item.type === 'lang' }" @mouseover="showItem(index)">
        <p v-if="item.children" @click="toPath(item)">
          <i class="icon eicon eicon-r-l-guojifuwu mr-[4px]" style="font-size: 14px" />
          {{ lang?.name }}<el-icon class="ml-[4px]">
            <CaretBottom />
          </el-icon>
        </p>
        <span v-else :class="item.type ? 'empty' : ''" @click="toPath(item)">
          {{ item.name }}
          <!--   common.e-menu.7692539-0 -->
        </span>
      </div>

      <transition name="el-zoom-in-top">
        <div
          v-if="index === activeIndex && item.children"
          class="menu_content_wrapper"
          :class="{ menu_content_r: item.type === 'lang' }"
          @mouseleave="close"
        >
          <div class="menu_content">
            <p
              v-for="(item1, index1) in item.children"
              :key="index1"
              :class="{ cur: item1?.value === lang?.value }"
              @click="toPath(item1, item.type)"
            >
              {{ item1?.name }}
            </p>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script setup>
import { CaretBottom } from '@element-plus/icons-vue'
import { langList } from './config'

defineProps({
  menuList: {
    type: Array,
    default: () => [],
  },
})
const { locale, setLocale } = useI18n()
const env = useRuntimeConfig()
const lang = ref({})
lang.value = langList.find(item => item.value === locale.value)
onMounted(async () => {
  await nextTick()
  lang.value = langList.find(item => item.value === locale.value)
})
// console.log('当前语言是：', locale.value)
const activeIndex = ref(null)

const showItem = (index) => {
  console.log(index, 11122)
  activeIndex.value = index
}

const close = () => {
  activeIndex.value = null
}
// onMounted(() => {
//   setLocale('en')
// })

const toPath = async (item, type) => {
  console.log(item, type)
  if (type === 'lang') {
    await setLocale(item.value)
    lang.value = langList.find(item => item.value === locale.value)
    window.location.reload()
  }
  if (type === 'link') {
    window.open(item.value, '_blank')
  }
  if (item.path) {
    window.open(`${item.path}`, '_blank')
  }
}
</script>

<style lang="scss" scoped>
.menu_wrap {
  .menu_item_wrapper {
    position: relative;
    .menu_item {
      cursor: pointer;
      position: relative;
      height: 30px;
    }
    .menu_content_wrapper {
      position: absolute;
      z-index: 2000;
      top: 30px;
      left: 30%;
    }
    .menu_content {
      margin-top: 6px;
      box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.12),
        0 0 6px rgba(0, 0, 0, 0.04);
      background: #ffffff;
      color: #333;
      min-width: 100px;
      position: relative;
      padding: 10px;
      &::before {
        border-bottom: 10px solid #fff;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        content: "";
        height: 0;
        left: 40%;
        position: absolute;
        top: -4px;
        transform: translate(-50%, -50%);
        width: 0;
      }
      p {
        cursor: pointer;
      }

    }

  }

  .separate-i {
    height: 12px;
    width: 1px;
    display: inline-block;
    margin: auto 12px;
  }
}
</style>
